<template>
    <div>
        <h1>登录</h1>
        <table class="table table-bordered">
            <tr>
                <td>员工姓名</td>
                <td>
                    <input type="text" v-model="use.name">
                </td>
            </tr>

            <tr>
                <td>编号</td>
                <td>
                    <input type="text" disabled v-model="use.code">
                </td>
            </tr>
            <tr>
                <td>头像</td>
                <td>
                    <input type="file" @change="changeImg">
                    <img :src="use.photot" alt="" width="50" height="50">
                </td>
            </tr>
            <tr>
                <td>手机号</td>
                <td>
                    <input type="text" v-model="use.phone">
                </td>
            </tr>
            <tr>
                <td>角色Id</td>
                <td>
                    <select v-model="use.roleId">
                        <option value="">请选择</option>
                        <option >管理员</option>
                        
                    </select>
                </td>
            </tr>

            <tr>
                <td>登陆密码</td>
                <td>
                    <input type="text" v-model="use.pwd">
                </td>
            </tr>
            <tr>
                <td>状态</td>
                <td>
                    <input type="radio" name="statuse" v-model="use.state" :value="0">禁用
                    <input type="radio" name="statuse" v-model="use.state" :value="1">启用
                </td>
            </tr>
            <tr>
                <td>备注</td>
                <td>
                    <textarea v-model="use.remark" rows="3" cols="30">


                   </textarea>
                </td>
            </tr>

            <tr>
                <td></td>
                <td>
                    <input type="button" value="登录" @click="">
                </td>
            </tr>




        </table>
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
import moment from 'moment';
import { useUserStore } from '@/stores/user';
let router = useRouter();
let route = useRoute();
let userStore = useUserStore();
let data: any = reactive({
    use: {

        "name": "",
        "code": moment(new Date()).format("YYYYMMDD")+(parseInt(Math.random()*900)+100),
        "photot": "",
        "phone": "",
        "roleId": 0,
        "pwd": "",
        "state": 0, 
        "desc": "",

    },
});

let { use } = toRefs(data);

onMounted(() => {
    GetList();
})

const GetList= () => {
  
    axios({
        url: '/api/Role/RoleList',
        method: 'get',
       
        
    }).then((res) => {
        res.data=res.data.data;
    })


}

const changeImg= (e: any) => {
    let file = e.target.files[0];
    let f = new FormData();
    f.append('file', file);
    axios({
        url: '/api/EMP/PostzImg',
        method: 'post',
        data: f,
    }).then((res) => {
        use.value.photot = res.data.data;
    })
}


</script>

<style scoped></style>